<template>
    <div style="background-color: darkviolet;width: 1000px;">
        <el-carousel :interval="5000" type="card" height="300px" width="600px">
            <el-carousel-item v-for="(e,i) in bans" :key="i">
                <div style="{border: 15px solid red}">
                    <img :src="e.url" :alt="e.width">
                </div>
            </el-carousel-item>
        </el-carousel>
<!--        <el-carousel :interval="5000" type="card">-->
<!--            <el-carousel-item v-for="(e,i) in imgStyle" :key="i" height="300px" width="600px">-->
<!--                <div style="{border: 15px solid red}">-->
<!--                    &lt;!&ndash;                    <div :style="backgroundImage:"></div>&ndash;&gt;-->
<!--                    <div :style="e">hi+{{e}}</div>-->
<!--                </div>-->
<!--            </el-carousel-item>-->
<!--        </el-carousel>-->
<!--        <div v-for="(e,i) in bans">-->
<!--        <div style="width: 400px;" :style="{backgroundImage: 'url:('+e.url+')'}"></div>-->

<!--        </div>-->
<!--        <div v-for="(e,i) in imgStyle" :key="i">-->
<!--            <div :style="e">hi+{{e}}</div>-->
<!--        </div>-->
    </div>
</template>

<script>

    // import New from './components/New.vue';
    let s1 = require('/static/logo.png');
    export default {

        name: "PhotoCarousel",
        components: {
            // New,Old,
        },
        props: {
            sampleP: {
                type: Number,
                default: 0
            },
            bans: {
                type: [],
                //给个默认值方便他人阅读　一看结构一清二楚
                default: [
                    {url: s1, width: 200, height: 300},
                    // {url: s2,width:240,height:300},
                ]
                //    this.$nextTick()图片大小不一则需要额外代码
            }
        },
        data() {
            return {
                sampleD: 'value'
            }
        },
        computed: {
            // sampleC() {
            //     return this.sampleD+'--';
            // }
            imgStyle() {
                return this.bans.map(x => {
                    return {
                        backgroundImage: x.url
                    }
                })
            }
    },
    created()
    {
    }
    ,
    mounted()
    {
    }
    ,
    methods: {
        sampleM()
        {

        }
    }
    ,
    watch: {
        // sampleC(newValue, oldValue) {
        //
        // }
    }
    ,
    }
</script>

<style scoped>
    /*<style lang='scss' scoped>*/

</style>